<template>
<div class="index">
  <div class="top-top">
      <el-button style="height: 100%;float: left;margin-right: 2%;" @click="dialogFormVisible = true">
        创建班级
      </el-button>
      <div style="margin-right: 2%;">
        <el-input v-model.number="input" style="width: 240px;height: 100%;" placeholder="请输入班级号" @keyup.enter="seach"/>
        <el-button @click="seach" style="height: 100%;">
          <template #icon>
            <iconSeach></iconSeach>
          </template>
        </el-button>
      </div>
      <div style="margin-right: 2%;">
        <el-select v-model.number="gradeLevelValue" placeholder="切换年级" @change="selectLevel" style="width: 170px;height: 100%;">
          <el-option label="大一" :value=1 />
          <el-option label="大二" :value=2 />
          <el-option label="大三" :value=3 />
          <el-option label="大四" :value=4 />
        </el-select>
      </div>
  </div>
  <div class="main">
    <el-table :data="classList" style="width: 100%;" :row-style="{height:'55px'}" :header-row-style="{height:'55px'}" >
        <el-table-column prop="cclassNub" label="班级号" class="workList" align="center"/>
        <el-table-column prop="cclassName" label="班级名称" class="workList" align="center" />
        <el-table-column label="年级" class="workList" align="center" #default="scope">
          <div v-if="scope.row.gradeLevel==1">大一</div>
          <div v-else-if="scope.row.gradeLevel==2">大二</div>
          <div v-else-if="scope.row.gradeLevel==3">大三</div>
          <div v-else-if="scope.row.gradeLevel==4">大四</div>
        </el-table-column>
        <el-table-column prop="password" label="密码" class="workList" align="center"/>
        <el-table-column prop="major" label="专业" class="workList" align="center"/>
        <el-table-column prop="headTeacherId" label="负责老师id" class="workList" align="center"/>
        <el-table-column prop="repoId" label="知识库id" class="workList" align="center"/>
        <el-table-column label="操作" align="center" #default="scope">
          <el-button style="border: 0;margin: 0;" @click="updateClassInfo(scope.row.id)">
            <template #icon>
              <iconEdit></iconEdit>
            </template>
          </el-button>
          </el-table-column>
      </el-table>
      <div class="page">
        <div style="margin-top: 20px;display: flex; justify-content: center;">
          <el-pagination
            :total="total"
            v-model:currentPage="currentPage"
            :page-size="pageSize"
            layout="total,prev,pager,next"
            @current-change="handleCurrentChange"
            />
        </div>
      </div>
  </div>
<!-- //创建班级弹窗 -->
  <el-dialog v-model="dialogFormVisible" title="创建班级" width="500">
    <el-form :model="newClassForm">
      <el-form-item label="班级名称">
        <el-input v-model="newClassForm.cclassName" autocomplete="off" placeholder="请输入班级名称"/>
      </el-form-item>
      <el-form-item label="班级号&emsp;">
        <el-input v-model.number="newClassForm.cclassNub" autocomplete="off" placeholder="请输入班级号"/>
      </el-form-item>
      <el-form-item label="年&emsp;&emsp;级">
        <el-select v-model.number="newClassForm.gradeLevel" placeholder="请选择年级">
          <el-option label="大一" :value=1 />
          <el-option label="大二" :value=2 />
          <el-option label="大三" :value=3 />
          <el-option label="大四" :value=4 />
        </el-select>
      </el-form-item>
      <el-form-item label="专&emsp;&emsp;业">
        <el-input v-model="newClassForm.major" autocomplete="off" placeholder="请输入专业"/>
      </el-form-item>
      <el-form-item label="密&emsp;&emsp;码" >
        <el-input v-model="newClassForm.password" autocomplete="off" placeholder="请输入密码"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary"@click="createClass" >创建</el-button>
      </div>
    </template>
  </el-dialog>

<!-- //编辑班级信息弹窗 -->
<el-dialog v-model="dialogUpdateClass" title="编辑班级信息" width="500">
  <el-form :model="newClassForm">
    <el-form-item label="班级名称">
      <el-input v-model="updateClassForm.cclassName" autocomplete="off" placeholder="请输入班级名称"/>
    </el-form-item>
    <el-form-item label="年&emsp;&emsp;级">
      <el-select v-model.number="updateClassForm.gradeLevel" placeholder="请选择年级">
        <el-option label="大一" :value=1 />
        <el-option label="大二" :value=2 />
        <el-option label="大三" :value=3 />
        <el-option label="大四" :value=4 />
      </el-select>
    </el-form-item>
    <el-form-item label="专&emsp;&emsp;业">
      <el-input v-model="updateClassForm.major" autocomplete="off" placeholder="请输入专业"/>
    </el-form-item>
    <el-form-item label="密&emsp;&emsp;码" >
      <el-input v-model="updateClassForm.password" autocomplete="off" placeholder="请输入密码"/>
    </el-form-item>
  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="dialogUpdateClass = false">取消</el-button>
      <el-button type="primary"@click="updateClass" >确认</el-button>
    </div>
  </template>
</el-dialog>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import IconSeach from '../../../assets/seach.vue';
import { createClassAPI,getClassListAPI,getUpdateClassInfoAPI,submitUpdateClassAPI } from '../../../api/teacher/class';
import { ElMessage } from 'element-plus';
import IconEdit from '../../../assets/edit.vue';
import { onMounted } from 'vue';

const dialogFormVisible = ref(false)
const dialogUpdateClass=ref(false)
const total=ref(12)
const currentPage=ref(1)
const pageSize=ref(10)
const input=ref()
const gradeLevelValue=ref(1)
const newClassForm = ref({
  cclassName:'',
  cclassNub:null,
  gradeLevel:1,
  major:'',
  password:''
})
const classList=ref([
  {
    id:1,
    cclassNub:122,
    cclassName:'qdqq',
    gradeLevel:1,
    password:'23123123',
    major:'2112',
    headTeacherId:1,
    repoId:'dsfsssd',
    createTime:'2023-23-32 02:23'
  },
  {
    id:1,
    cclassNub:122,
    cclassName:'qdqq',
    gradeLevel:1,
    password:'23123123',
    major:'2112',
    headTeacherId:1,
    repoId:'dsfsssd',
    createTime:'2023-23-32 02:23'
  },
])
const updateClassForm=ref({
  id:null,
  cclassName:'rererr',
  gradeLevel:2,
  major:'67',
  password:'82383',
})
const seach=()=>{
  console.log("点击了搜索",input.value)
}
const selectLevel=()=>{
  console.log("点击了切换年级",gradeLevelValue.value)
  getClassList()
}
const updateClassInfo=async(id)=>{
  console.log("点击了编辑班级信息",id)
  const result=await getUpdateClassInfoAPI(id)
  console.log("从后端返回的班级数据",result)
  updateClassForm.value=result.data.data
  dialogUpdateClass.value=true
}
//分页
const handleCurrentChange=()=>{
  console.log("当前页码数",currentPage.value)
  getClassList()
}

//获取班级列表

const getClassList=async()=>{
  let params={
    cclassNub:null,
    pageNo:currentPage.value,
    pageSize:pageSize.value,
    gradeLevel:gradeLevelValue.value
  }
  console.log("传给后端的数据",params)
  const result=await getClassListAPI(params)
  console.log("获取到的班级列表",result.data.data.list)
  // console.log(classList.value)
  classList.value=result.data.data.list
  // console.log("dsfsdfs",classList.value)
  total.value=result.data.data.total
}

onMounted(()=>{
  getClassList()
})

//重置班级
const resetClass=()=>{
  newClassForm.value={
  cclassName:'',
  cclassNub:null,
  gradeLevel:1,
  major:'',
  password:''
}
}
const createClass=async()=>{
  if(newClassForm.value.cclassName==''||newClassForm.value.cclassNub==''||newClassForm.value.major==''||newClassForm.value.password==''){
    ElMessage.warning("输入框不能为空！")
  }else{
    console.log('点击了创建班级',newClassForm.value)
    const result=await createClassAPI(newClassForm.value)
    if(result.data.code==200){
      ElMessage.success('新建班级成功')
      resetClass()
      getClassList()
      dialogFormVisible.value = false
    }else{
      ElMessage.warning('创建失败！')
    }
  }
}
//提交修改的班级信息
const updateClass=async()=>{
  console.log("修改后的班级信息",updateClassForm.value)
  const result=await submitUpdateClassAPI(updateClassForm.value)
  console.log(result)
  dialogUpdateClass.value=false
}
</script>
<style scoped>
.index{
  width: 100%;
  height: 100%;
  /* background-color: rgba(165, 42, 42, 0.461); */
}
.top-top{
  width: 100%;
  height: 6%;
  display: flex;
}
:deep(.el-select__wrapper.el-tooltip__trigger.el-tooltip__trigger){
  height: 100%;
  /* background-color: aqua; */
}
.main{
  width: 100%;
  height: 94%;
  box-shadow: var(--el-box-shadow-light);
  border-radius:8px;
  margin-top: 1%;
  display: flex;
  flex-direction: column;
}
.page{
  /* margin: auto; */
  /* height: 32px; */
  width: 100%;
  /* margin-bottom: 10px; */
  /* background-color: rgb(85, 130, 168); */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* bottom: 0; */
  margin-top: auto;
  margin-bottom: 1%;
  /* padding-top: 1%; */
  /* margin-bottom: 44px; */
  /* bottom: 22px; */
  /* top:22px; */
}
:deep(.btn-prev){
  /* background-color: rgb(1, 85, 158); */
  height: 1em;
}
:deep(.number){
  /* background-color: rgb(54, 121, 180); */
  height: 1em;
}
:deep(.btn-next.is-last){
  /* background-color: antiquewhite; */
  height: 1em;
}
:deep(.el-pagination){
  height: 1em;
}
:deep(.more.btn-quickprev.el-icon){
  height: 1em;
}
:deep(.more.btn-quicknext.el-icon){
  height: 1em;
}
</style>